<template>
  <div>
    <el-dialog
    :visible.sync="dialogVisible"
    width="30%"
    >
    <p style="width:100%;text-align:center;font-size:18px;font-weight:400;height:50px">帐号密码登录</p>
    <el-form :model="userinfo"  ref="userinfo" >
    <el-form-item label="" prop="username" label-width="60px" :rules="[{ required: true, message: '用户名或手机号不能为空', trigger: 'blur' }]">
      <el-input v-model="userinfo.username" placeholder="用户名或手机" style="width:80%"></el-input>
    </el-form-item>
     <el-form-item label="" prop="password" label-width="60px" :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]">
      <el-input v-model="userinfo.password" type="password" placeholder="密码" style="width:80%"></el-input>
    </el-form-item>
    
    <el-form-item>
    <el-button type="primary" @click="onSubmit" style="width:68%;margin-left:14%">登录</el-button>
    </el-form-item>

    <div class="loginfoot">
      <ul>

        <router-link to="/forget" target="_blank" >
        <li style="color:black">忘了密码</li>
        </router-link >
        <router-link to="/register" target="_blank" >
        <li>注册新账号</li>
        </router-link >
     
      </ul>
    </div>

    </el-form>
    </el-dialog>
    <header>
      <div class="top">
           <img src="../assets/logo1.png" alt="" style="width:96px;margin-top:6px; opacity: 0.9;z-index:5;margin-left:200px"> 
           <img src="../assets/headback2.png" alt="" style="z-index:5;left:500px"> 
          <img src="../assets/headback.png" alt="" class="topimg">

          <div v-if="!userinfo.id" class="logina" @click="login()">
          <img src="../assets/user.png" alt="" style ="float:left;width:47px;"> 
          <p >亲爱的游客,请先登录</p>
          </div>
        <div v-if="userinfo.id" >
            <img  :src="userinfo.avatar"
                 width="50"
                 height="50"
                 style="border-radius:50%;position:absolute;right:350px;top:15px;cursor: pointer;">
            <span >{{ userinfo.nickname }}</span>
        <span style="right:180px;" @click="loginOut()">退出</span>
        </div>
      </div>
     
      <nav class="navbar navbar-fixed-top" >
        <ul id="a" >
        <li class="logo"></li>
        <router-link to="/" >
        <li><i class="el-icon-s-home">首页</i></li>
        </router-link>

        <router-link to="/news" >
        <li><i class="el-icon-postcard"> 新 闻  </i></li>
        </router-link>
        
        <router-link to="/team" >
        <li><i class="el-icon-trophy"> 球 队 </i></li>
        </router-link>
        
        <router-link to="/player"  >
        <li><i class="el-icon-basketball" > 球 员 </i> </li>
        </router-link>

        <!-- <router-link to="/match">
        <li><i class="el-icon-date" > 比 赛 </i></li>
        </router-link> -->
      </ul>
      </nav>
      
    </header>
    <nuxt style="min-height:1000px"  ref="header"/>
    <footer>
        <div class="footmain">

          <img src="../assets/logo1.png" alt="" class="footlog">
          <p class="footp">mamba 新闻网</p>
           <p class="footp" style="top:140px">重庆文理学院 767417609@qq.com</p>
          <div class="about">
          <img src="../assets/weixin.jpg" alt="">
          <p style="padding-top:20px">联系我们</p>
        </div> 

        </div> 
    </footer>
  </div>
</template>
<script>
import cookie from 'js-cookie';
import user from '@/api/user'
import $ from 'jquery'
  export default {
    data() {
      return {
          userinfo:{},
          dialogVisible: false
      };
    },
    mounted () {
    this.showInfo()
    // jq代码写在mounted 里面
    $(function () {
    $(this).scrollTop(0);
    $(window).scroll(function() {
        var scroH = $(document).scrollTop();  //滚动高度
        var viewH = $(window).height();  //可见高度 
        var contentH = $(document).height();  //内容高度
      if(scroH >1){ 
         $('#a').css("top","0px")
         
        }
        else{
           $('#a').css("top","80px")
        }
        if(contentH =0){ 
          $('#a').css("top","80px")
        }


    })

    })
  },
  computed:{
    loginType(){
      return this.$store.state.login
    }
  }
  ,
    methods: {
       showInfo(){
        var userStr = cookie.get('ucenter')
        if(userStr) {
        this.userinfo = JSON.parse(userStr)
      }
      },
        login(){
         this.dialogVisible = true;
 
        },
         onSubmit(){
          user.submitLoginUser(this.userinfo)
          .then(response => {
            console.log(response.data.token)
            if(response.data.token==='0'){
                this.$message({
                 type: 'false',
                 message: "请输入用户名或邮箱"
              })
            }else if(response.data.token==='00'){
                this.$message({
                 type: 'false',
                 message: "请输入密码"
              })
            }else if(response.data.token==='1'){
                this.$message({
                 type: 'false',
                 message: "用户名或邮箱不存在"
              })
            }else if(response.data.token==='2'){
                this.$message({
                 type: 'false',
                 message: "密码错误，请重新输入"
              })
            }else{
              this.$message({
                 type: 'success',
                 message: "登录成功"
              })

              cookie.set('usertoken', response.data.token,{domain:'localhost'})


              user.getLoginUserInfo()
              .then(response => {
                 this.userinfo = response.data.userInfo
                 cookie.set('ucenter', this.userinfo,{domain:'localhost'})
                 this.dialogVisible = false
                 window.location.href = '/'
               
              })
            }
              
          })
      },
      loginOut(){
      cookie.set('usertoken','',{domain: 'localhost'})
      cookie.set('ucenter','',{domain: 'localhost'})
      //回到首页面
      window.location.href = "/";
      }
    }
  }
</script>
<style >
header{
  height:100px;
  position: relative;
  width: 100%;
}
.navbar{
  min-height: 0;
}
.logina{
  width: 250px;
  height: 100px;
  z-index:150;
  position:absolute;
  right:249px;
  top: 12px;
}
.loginfoot{
  margin-left: 45%;
  margin-top:50px
}
.loginfoot ul{
  list-style: none;
}
.loginfoot li{
  float: left;
  width: 90px;
  font-size: 13px;
  border-right: 1px solid gray;
  text-align: center;
}

.logina p{
font-size:16px;color: rgb(255,243,197); opacity:0.8;display:block;margin-left:55px;margin-top:10px;  cursor: pointer;
}
.logina p:hover{
  color:white
}
.top{
   position: relative;
}
.top >img{
  position:absolute
}
.topimg{
    width: 100%;
    height:80px;
    top:0px
}
header ul{
  list-style: none;
  position: absolute;
  width: 100%;
  padding-left:22%;
  top: 80px;
  background-image: url("../assets/header_nav_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 60px;
  padding-top:10px;
  height: 50px;
  }


header li{
  float: left;
  font-size: 20px;
  color:white;
  width: 18%;
  cursor: pointer;
  text-align:center;
  line-height: 30px;
}
header li:hover{
  color:rgb(0,139,237);
}
header li p{
  font-size:18px;
  text-align:center;
  color: gainsboro;
}
.logo{
  margin-top:-15px;
  width: 5%;
}
.top span{
    display: block;
    width: 100px;
    top: 30px;
    right:240px;
    text-align: center;
    position: absolute;
    color:white;
    font-size: 16px;
    cursor: pointer;
}
footer{
  width: 100%;
  height: 300px;
  background-color: rgb(0,88,150);
}
.footmain{
  width:100%;
  position:relative;
}
footer .about img{
  width: 150px;
  position: absolute;
  right: 20.4%;
  top: 50px;
}
footer .about p{
  width: 150px;
  position: absolute;
  right: 18%;
  top: 200px;
  color: white;
  font-size:20px
}
.footlog{
  width: 180px;
  position: absolute;
  top: 70px;
  left:10%;

}
.footp{
  color:white;
  font-size:22px;
  position: absolute;
  top:100px;
  left:20%
}
</style>

